<template>
  <div class="check-page">
    <!-- 头部 -->
    <checkheader title="选择品牌" @fatherMethod="fatherMethod"></checkheader>
    <div class="check-time">
        <!-- 右侧字母栏 -->
      <section class="cityChoiceBox" id="cityChoiceBox">
        <div class="city-sidaber" id="city-sidaber" v-show='!isCancel'>
          <p v-for="(sidaber,index) in sidabers" :key='index' v-on:touchstart='mousedownFun(index)' v-on:touchend='mouseupFun(index)' v-text='sidaber'></p>
        </div>
        <!-- 显示相应的字母 -->
        <div v-show='zimShow' class="zimShow" v-text='zimText'></div>
        <article class="city-Box">
          <!-- 热门 -->
          <div class="brandpanel">
            <h3 class="title"><span class="circle"></span>热门</h3>
            <div class="panelbox">
              <ul class="brandtype">
                <li v-for="(item,index) in hotdata" :key="index" @click="onclick(index)">
                  <div class="brandimg">
                    <img :src="item.brandimg" />
                  </div>
                  <p class="brandname">{{item.brandtitle}}</p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 字母栏 -->
          <div class="brandpanel" v-for="(item,key) in city" :key="key" :ref="key">
            <h3 class="title"><span class="circle"></span>{{item.title}}</h3>
            <div class="panelbox">
              <ul class="brandlist">
                <li v-for="(innerItem,index) in item.lists" :key='index' @click="onclick(innerItem)">
                  <div class="button">{{innerItem}}</div>
                </li>
              </ul>
            </div>
          </div>
        </article>
      </section>
    </div>
    <!-- 尾部 -->
    <checkfoot @resetTime="resetTime" @confirmTime="confirmTime"></checkfoot>
  </div>
</template>

<script>
import checkheader from './checkHeader'
import checkfoot from './checkFoot'
export default {
  name: 'timeSearch',
  data () {
    return {
      zimShow: false, // 显示相应字母框
      zimText: '', // 字母
      sidabers: ['热', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      hotdata: [
        {
          'brandtitle': 'Acne Stuios 艾克妮',
          'brandimg': '../../../static/images/upload/pic01.png'
        },
        {
          'brandtitle': 'Alfred Dunhil 登喜路',
          'brandimg': '../../../static/images/upload/pic02.png'
        },
        {
          'brandtitle': 'American Eagle',
          'brandimg': '../../../static/images/upload/pic03.png'
        },
        {
          'brandtitle': 'Burberry 博柏利',
          'brandimg': '../../../static/images/upload/pic04.png'
        },
        {
          'brandtitle': 'Aape',
          'brandimg': '../../../static/images/upload/pic05.png'
        },
        {
          'brandtitle': 'Adidas 阿迪达斯',
          'brandimg': '../../../static/images/upload/pic06.png'
        }
      ],
      city: [
        // {
        //   'title': '热',
        //   'lists': this.hotdata
        // },
        {
          'title': 'A',
          'lists': [
            '阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门'
          ]
        },
        {
          'title': 'B',
          'lists': ['北京', '白银', '保定', '宝鸡', '保山', '包头', '巴中', '北海', '蚌埠', '本溪', '毕节', '滨州', '百色', '亳州'
          ]
        },
        {
          'title': 'C',
          'lists': ['重庆', '成都', '长沙', '长春', '沧州', '常德', '昌都', '长治', '常州', '巢湖', '潮州', '承德', '郴州', '赤峰', '池州', '崇左', '楚雄', '滁州', '朝阳'
          ]
        },
        {
          'title': 'D',
          'lists': ['大连', '东莞', '大理', '丹东', '大庆', '大同', '大兴安岭', '德宏', '德阳', '德州', '定西', '迪庆', '东营'
          ]
        },
        {
          'title': 'E',
          'lists': ['鄂尔多斯', '恩施', '鄂州']
        },
        {
          'title': 'F',
          'lists': ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'
          ]

        },
        {
          'title': 'G',
          'lists': ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛']

        },
        {
          'title': 'H',
          'lists': ['杭州', '哈尔滨', '合肥', '海口', '呼和浩特', '海北', '海东', '海南', '海西', '邯郸', '汉中', '鹤壁', '河池', '鹤岗', '黑河', '衡水', '衡阳', '河源', '贺州', '红河', '淮安', '淮北', '怀化', '淮南', '黄冈', '黄南', '黄山', '黄石', '惠州', '葫芦岛', '呼伦贝尔', '湖州', '菏泽'
          ]
        },
        {
          'title': 'I',
          'lists': []
        },
        {
          'title': 'J',
          'lists': ['济南', '佳木斯', '吉安', '江门', '焦作', '嘉兴', '嘉峪关', '揭阳', '吉林', '金昌', '晋城', '景德镇', '荆门', '荆州', '金华', '济宁', '晋中', '锦州', '九江',
            '酒泉'
          ]

        },
        {
          'title': 'K',
          'lists': ['昆明', '开封']

        },
        {
          'title': 'L',
          'lists': ['兰州', '拉萨', '来宾', '莱芜', '廊坊', '乐山', '凉山', '连云港', '聊城', '辽阳', '辽源', '丽江', '临沧', '临汾', '临夏', '临沂', '林芝', '丽水', '六安', '六盘水',
            '柳州', '陇南', '龙岩', '娄底', '漯河', '洛阳', '泸州', '吕梁'
          ]

        },
        {
          'title': 'M',
          'lists': ['马鞍山', '茂名', '眉山', '梅州', '绵阳', '牡丹江']

        },
        {
          'title': 'N',
          'lists': ['南京', '南昌', '南宁', '宁波', '南充', '南平', '南通', '南阳', '那曲', '内江', '宁德', '怒江'
          ]
        },
        {
          'title': 'O',
          'lists': []
        },
        {
          'title': 'P',
          'lists': ['盘锦', '攀枝花', '平顶山', '平凉', '萍乡', '莆田', '濮阳']

        },
        {
          'title': 'Q',
          'lists': ['青岛', '黔东南', '黔南', '黔西南', '庆阳', '清远', '秦皇岛', '钦州', '齐齐哈尔', '泉州', '曲靖', '衢州']

        },
        {
          'title': 'R',
          'lists': ['日喀则', '日照']
        },
        {
          'title': 'S',
          'lists': ['上海', '深圳', '苏州', '沈阳', '石家庄', '三门峡', '三明', '三亚', '商洛', '商丘', '上饶', '山南', '汕头', '汕尾', '韶关', '绍兴', '邵阳', '十堰', '朔州', '四平', '绥化', '遂宁', '随州', '宿迁', '宿州'
          ]

        },
        {
          'title': 'T',
          'lists': ['天津', '太原', '泰安', '泰州', '台州', '唐山', '天水', '铁岭', '铜川', '通化', '通辽', '铜陵', '铜仁', '台湾', 'W', '武汉', '乌鲁木齐', '无锡', '威海', '潍坊', '文山', '温州', '乌海', '芜湖', '乌兰察布', '武威', '梧州'
          ]
        },
        {
          'title': 'U',
          'lists': []
        },
        {
          'title': 'V',
          'lists': []
        },
        {
          'title': 'W',
          'lists': []
        },
        {
          'title': 'X',
          'lists': ['厦门', '西安', '西宁', '襄樊', '湘潭', '湘西', '咸宁', '咸阳', '孝感', '邢台', '新乡', '信阳', '新余', '忻州', '西双版纳', '宣城', '许昌', '徐州', '香港', '锡林郭勒', '兴安'
          ]

        },
        {
          'title': 'Y',
          'lists': ['银川', '雅安', '延安', '延边', '盐城', '阳江', '阳泉', '扬州', '烟台', '宜宾', '宜昌', '宜春', '营口', '益阳', '永州', '岳阳', '榆林', '运城', '云浮', '玉树', '玉溪', '玉林'
          ]

        },
        {
          'title': 'Z',
          'lists': ['杂多县', '赞皇县', '枣强县', '枣阳市', '枣庄', '泽库县', '增城市', '曾都区', '泽普县', '泽州县', '札达县', '扎赉特旗', '扎兰屯市', '扎鲁特旗', '扎囊县', '张北县', '张店区', '章贡区', '张家港', '张家界', '张家口', '漳平市', '漳浦县', '章丘市', '樟树市', '张湾区', '彰武县', '漳县', '张掖', '漳州', '长子县', '湛河区', '湛江', '站前区', '沾益县', '诏安县', '召陵区', '昭平县', '肇庆', '昭通', '赵县', '昭阳区', '招远市', '肇源县', '肇州县', '柞水县', '柘城县', '浙江', '镇安县', '振安区', '镇巴县', '正安县', '正定县', '正定新区', '正蓝旗', '正宁县', '蒸湘区', '正镶白旗', '正阳县', '郑州', '镇海区', '镇江', '浈江区', '镇康县', '镇赉县', '镇平县', '振兴区', '镇雄县', '镇原县', '志丹县', '治多县', '芝罘区', '枝江市', '芷江侗族自治县', '织金县', '中方县', '中江县', '钟楼区', '中牟县', '中宁县', '中山', '中山区', '钟山区', '钟山县', '中卫', '钟祥市', '中阳县', '中原区', '周村区', '周口', '周宁县', '舟曲县', '舟山', '周至县', '庄河市', '诸城市', '珠海', '珠晖区', '诸暨市', '驻马店', '准格尔旗', '涿鹿县', '卓尼', '涿州市', '卓资县', '珠山区', '竹山县', '竹溪县', '株洲', '株洲县', '淄博', '子长县', '淄川区', '自贡', '秭归县', '紫金县', '自流井区', '资溪县', '资兴市', '资阳'
          ]
        }
      ]
    }
  },
  mounted () {
  },
  created () {
  },
  methods: {
    fatherMethod () { // 返回我的账本页面
      this.$router.push({ name: 'mycheck' })
    },
    resetTime () {
      // 重置
      // console.log('重置')
    },
    confirmTime () {
      // 确定
      // console.log('确定')
      this.$router.push({name: 'mycheck'})
    },
    // 侧栏字母鼠标按下事件
    mousedownFun: function (index) {
      this.zimShow = !this.zimShow
      this.zimText = this.sidabers[index]
    },
    // 侧栏字母鼠标弹起事件
    mouseupFun: function (index) {
      this.zimShow = !this.zimShow
      var cityChoiceBox = document.getElementById('cityChoiceBox')
      var h3 = cityChoiceBox.getElementsByTagName('h3')
      var timer = null
      function scrT (iTarget) {
        clearInterval(timer)
        document.ontouchstart = function () {
          clearInterval(timer)
        }
        timer = setInterval(function () {
          var scrollT = document.documentElement.scrollTop || document.body.scrollTop
          var speed = 0
          speed = Math.floor((iTarget - scrollT) / 5)
          if (scrollT === iTarget) {
            clearInterval(timer)
          } else {
            document.documentElement.scrollTop = scrollT + speed
            document.body.scrollTop = scrollT + speed
          }
        }, 30)
      }
      scrT(h3[index].offsetTop + 58)
    }
  },
  computed: {
    filItems: function () { // 截取数组第1个之后的
      return this.sidabers.slice(1)
    }
  },
  components: {
    checkheader,
    checkfoot
  },
  watch: {}
}
</script>

<style lang="stylus" scoped>
.check-time {
  position: relative;
  width: 100%;
  .cityChoiceBox{
  position: absolute;
  margin-bottom: 1rem;
  .city-Box{
  // position:relative;
  width:100%;
  .brandpanel{
    .title{
      font-size: 0.32rem
      line-height: 0.7rem;
      background: #f6f5f5;
      .circle{
        display: inline-block;
        width: 0.04rem;
        height: 0.22rem;
        background: #d21733;
        margin-right: 0.11rem;
      }
    }
    .panelbox{
        .brandtype{
          list-style: none;
          clear: both;
          overflow: hidden;
          width: 97%;
          padding: 0.26rem 0;
          li{
            width: 33.333%
            float: left;
            text-align: center;
            .brandimg{
              width: 1.6rem;
              height: 1.6rem;
              font-size: 0;
              line-height: 1.6rem;
              vertical-align: middle;
              margin: 0 auto;
              img{
                max-width: 100%;
                max-height: 100%;
                display: block;
              }
            }
            .brandname{
              font-size: 0.28rem;
              color: #666;
              padding: 0.1rem 0.36rem;
              line-height: 1.3
            }
          }
        }
        .brandlist{
          li{
            list-style: none;
            font-size: 0.28rem;
            color: #666;
            line-height: 0.85rem;
            padding-left: 0.3rem;
          }
        }

      }
  }
}
}

.city-sidaber{
  position:fixed;
  right:0.2rem;
  top:1.3rem;
  width:0.6rem;
  line-height:0.4rem;
  text-align:center;
  font-size:0.28rem;
  color:#999;
}
.zimShow{
  position:fixed;
  left:50%;
  top:300px;
  margin-left:-20px;
  width:60px;
  height:60px;
  line-height:60px;
  text-align: center;
  background-color:#d21733;
  border-radius:50%;
  font-size:20px;
  color:#fff;
}
}

</style>
